<template>
  <div class="form_email">
    
    <a-form
    :model="formState"
    name="basic"
    id="content"
    ref="formRef"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed">
      <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
        <a-col class="gutter-row" :span="8">
          <a-form-item
          label="Title"
          name="Title"
          :rules="[{ required: true, message: 'Please input Title!' }]">
            <a-input placeholder="" v-model:value="formState.Title" />
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <a-form-item
          label="First Name"
          name="FirstName"
          :rules="[{ required: true, message: 'Please input First Name!' }]">
            <a-input placeholder="" v-model:value="formState.FirstName" />
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="8">
        <a-form-item
          label="Last Name"
          name="LastName"
          :rules="[{ required: true, message: 'Please input Last Name!' }]">
            <a-input placeholder="" v-model:value="formState.LastName" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item
        label="Company/Organization"
        name="Company"
        :rules="[{ required: true, message: 'Please input Company/Organization!' }]">
        <a-input placeholder="" v-model:value="formState.Company" />
      </a-form-item>
      <a-form-item
        label="Preferred Method of Contact"
        name="Preferred">
        <a-input placeholder="No preference" v-model:value="formState.Preferred" />
      </a-form-item>
       <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
        <a-col class="gutter-row" :span="8">
          <a-form-item
          label="Business Email"
          name="Email"
          :rules="[{ required: true, message: 'Please input Business Email!' }]">
            <a-input placeholder="example@example.com" v-model:value="formState.Email" />
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <a-form-item
          label="Business Phone"
          name="Phone"
          :rules="[{ required: true, message: 'Please input Business Phone!' }]">
            <a-input placeholder="555-555-5555" v-model:value="formState.Phone" />
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="8">
        <a-form-item
          label="Business Extension"
          name="Extension">
            <a-input placeholder="1234" v-model:value="formState.Extension" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item
      label="Country"
      name="Country"
      :rules="[{ required: true, message: 'Please input Country!' }]">
        <a-input placeholder="" v-model:value="formState.Country" />
      </a-form-item>
      <a-form-item
      label="Postal Code"
      name="Postal">
        <a-input placeholder="" v-model:value="formState.Postal" />
      </a-form-item>
      <a-form-item
      label="Comments"
      name="Comments">
        <a-input placeholder="" v-model:value="formState.Comments" />
      </a-form-item>
       <a-form-item name="sidentifyMode">
        <div class="code" >
        <SIdentify :identifyCode="identifyCode"></SIdentify>
        <p @click="refreshCode" style="color:#1677ff;cursor: pointer;">New Code</p>
      </div>
       <div class="sidentifyMode">
        <p>Please type the code above</p>
        <a-input placeholder="" v-model:value="formState.sidentifyMode" />
       </div>
       </a-form-item>
      
    <a-form-item class="btn" >
       <a-button type="primary" danger html-type="submit">SUBMIT</a-button>
    </a-form-item>
  </a-form>
  <!-- <form action="https://formspree.io/2248121568@qq.com" method="post" id="content">
          <h1 class="yuyueTitle">立即预约，免费演示</h1>
          <input type="text" name="name" placeholder="姓名" class="contact-area" v-model="contactArea">
          <input type="text" name="company" placeholder="公司名称">
          <input type="text" name="position" placeholder="职位">
          <input type="text" name="phone" placeholder="联系电话">
          <input type="email" name="_replyto" placeholder="邮箱">
          <div class="commit" @click="onFinish">点击预约</div>
        </form> -->
  </div>
</template>
<script lang="ts" setup>
import { message } from 'ant-design-vue';
import SIdentify from '@/components/Sidentify.vue'
import $ from 'jquery'

let identifyCode = ref('')
let identifyCodes = ref('1234567890abcdefjhijklinopqrsduvwxyz') //验证码出现的数字和字母

const formState = ref({
  Title: '',
  FirstName:'',
  LastName:'',
  Company:'',
  Preferred:'',
  Email:'',
  Phone:'',
  Extension:'',
  Postal:'',
  Country:'',
  Comments:'',
  sidentifyMode:''//输入框验证码
});

//组件挂载
onMounted(() => {
  identifyCode.value = ''
  makeCode(identifyCodes.value, 5)
})
 
// 生成随机数
const randomNum = (min, max) => {
  max = max + 1
  return Math.floor(Math.random() * (max - min) + min)
}
// 随机生成验证码字符串
const makeCode = (o, l) => {
  console.log(o.length,l,randomNum(0, o.length))
  for (let i = 0; i < l; i++) {
    identifyCode.value += o[randomNum(0, o.length)]
  }
}
// 更新验证码
const refreshCode = () => {
 identifyCode.value = ''
  makeCode(identifyCodes.value, 5)
}



const onFinish = (values: any) => {
  //  let data =$('#content').serialize()
  console.log(identifyCode.value,222,formState.value.sidentifyMode)
  //验证验证码不为空
  if (!formState.value.sidentifyMode) {
    message.warning('验证码不能为空！')
    return
  }
  //验证验证码是否正确
  if (identifyCode.value!= formState.value.sidentifyMode) {
    message.warning('验证码错误')
    refreshCode()
    return
  }

  console.log('Success:', values);
   $.ajax({
        type: 'post', //必须post请求
        url: 'https://chengyuanlin87@gmail.com', //test换成你要接收的邮箱地址
        async: true,
        data: {name:"234"},
        dataType: 'json',
        success: res => {
          alert(res) //发送成功后的操作
        },
        error: res => {
          alert(res)
        },
      })
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

</script>
<style lang="scss" scoped>
.form_email{
  ::v-deep(.ant-form){
    padding: 20px;
    .ant-form-item {
      .ant-form-item-label{
        padding-bottom: 0 !important;
      }
      .ant-input{
        border: none;
        border-bottom: 1.5PX solid #333;
        border-radius: 0;
       
      }
      .ant-input:focus { 
        border: none; 
        box-shadow: none;
         border-bottom: 1.5PX solid #333;
        }
    }
    .sidentifyMode{
      display: flex;
      display: -webkit-flex;
      justify-content: flex-start;
      align-items: center;
      p{
        min-width: 180PX;
        font-size: 13PX;
        color: #666;
      }
    }
  }
}

</style>
